<script setup lang="ts">
const props = defineProps({
  layout: {
    type: String,
    default: 'create,refresh'
  }
})
const btns = computed(() => props.layout.split(','))
defineEmits(['create', 'refresh', 'delete', 'statusChange'])
</script>

<template>
  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px">
    <div>
      <el-button v-if="btns.includes('create')" type="primary" size="small" icon="plus" @click="$emit('create')">
        新增
      </el-button>
      <el-popconfirm v-if="btns.includes('delete')" title="是否确认要删除吗?" width @confirm="$emit('delete')">
        <template #reference>
          <el-button type="danger" size="small" icon="delete"> 批量删除 </el-button>
        </template>
      </el-popconfirm>
      <el-button v-if="btns.includes('statusOn')" type="success" size="small" @click="$emit('statusChange', 1)"> 上架 </el-button>
      <el-button v-if="btns.includes('statusOff')" type="info" size="small" @click="$emit('statusChange', 0)"> 下架 </el-button>
    </div>
    <el-tooltip v-if="btns.includes('refresh')" effect="dark" content="刷新数据" placement="top">
      <el-button text icon="refresh" @click="$emit('refresh')"></el-button>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped></style>
